import React, {useState} from "react"
import Select, {components} from 'react-select'
import styles from './Select.module.scss'

function MySelect(props) {
  const {options, defaultValue, selectOnChangeCallBack} = props
  const [currentOptions, setCurrentOptions] = useState(defaultValue)
  const [currentVal, setCurrentVal] = useState(defaultValue)

  // 需要观测数据变化
  React.useEffect(() => {
    setCurrentOptions(options)
  }, [options])

  function _onChange(e, options) {
    let val = options.filter(option => option.value === e.value)
    setCurrentVal(val)
    selectOnChangeCallBack(val)
  }

  return(
    <div>
      <Select className={styles.select}
          value={currentVal}
          // selectedValue={currentVal}
          options={currentOptions}
          onChange={e => _onChange(e, currentOptions)}
          placeholder='👉请选择类型...'
          isMulti={false}
          components={{
            Control: ({ children, ...rest }) => (
              <components.Control {...rest}>
                <span aria-label="" role="img"> 🤚 </span>{children}
              </components.Control>
            )}
          }
        />
    </div>
  )
}


export default MySelect